<template>
	<view>
		<view class="head-box">
			<div class="head-bg">
				<view class="order-status">
					<view class="status-head flex flai fljc">
						<image src="../../static/img/my/detail_dfk.png" mode="" v-if="orderStatus==101"></image>
						<image src="../../static/img/my/detail_dsh.png" mode="" v-else-if="orderStatus==103"></image>
						<image src="../../static/img/my/detail_dfh.png" mode="" v-else-if="orderStatus==102"></image>
						<image src="../../static/img/my/detail_fished.png" mode="" v-else></image>
						<text v-if="orderStatus==101">待付款</text>
						<text v-else-if="orderStatus==102">待发货</text>
						<text v-else-if="orderStatus==103">待收货</text>
						<text v-else>已完成</text>
					</view>
					<view class="order-status-title" v-if="orderStatus==101">订单待付款，待商家联系付款</view>
				</view>
			</div>
		</view>
		<view class="box">
			<view class="company flex">
				<image src="../../static/img/my/detail_car.png" mode=""></image>
				<view class="company-info flex1">
					<text>{{info.errandName}}</text>
					<!-- <text>大笨熊超快美妆跑腿大笨熊超快美妆跑腿大笨熊超快美妆跑腿大笨熊超快美妆跑腿大笨熊超快美妆跑腿大笨熊超快美妆跑腿</text> -->
					<text style="margin-bottom: 14rpx;">发货快递: {{info.shipChannel}}</text>
					<text>快递单号: {{info.shipSn}}</text>
				</view>
			</view>
			<view class="receiving-box">
				<view class="receiving-box-list flex" >
					<image src="../../static/img/my/detail_house.png" mode=""></image>
					<view class="receiving-address">
						<view class="user-info">
							<text>发件人:{{info.fjrName}}</text>
							<text>{{info.fjrPhone}}</text>
						</view>
						<view class="address">发货地址：{{info.fjrAddress}}</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="receiving-box-list flex" >
					<image src="../../static/img/my/detail_house.png" mode=""></image>
					<view class="receiving-address">
						<view class="user-info">
							<text>收件人:{{info.sjrName}}</text>
							<text>{{info.sjrPhone}}</text>
						</view>
						<view class="address">收货地址：{{info.sjrAddress}}</view>
					</view>
					<view class="line"></view>
				</view>
			</view>
			<view class="goods-box">
				<view class="goods-title">商品清单</view>
				<view class="goods-list-box">
					<view class="goods-list" v-for="(item,index) in info.orderGoods" :key="index">
						<view class="goods-name">{{item.goodsName}}</view>
						<view class="goods-other-info flex flai fljcsb">
							<text>¥ {{item.price}}</text>
							<text>X{{item.number}}</text>
						</view>
					</view>
					<div class="other-info-list flex flai fljcsb">
						<text>快递费</text>
						<text>¥ {{info.emsPrice}}</text>
					</div>
					<div class="other-info-list flex flai fljcsb">
						<text>跑腿费</text>
						<text>¥ {{info.errandPrice}}</text>
					</div>
					<div class="other-info-list flex flai fljcsb">
						<text>货款</text>
						<text>¥ {{info.goodsPrice}}</text>
					</div>
				</view>
			</view>
			<view class="other-order-info">
				<view class="order-info-list flex flai fljcsb">
					<text>包裹编号</text>
					<text>{{packId}}</text>
				</view>
				<view class="order-info-list flex flai fljcsb">
					<text>订单编号</text>
					<text>{{info.orderId}}</text>
				</view>
				<view class="order-info-list flex flai fljcsb">
					<text>下单时间</text>
					<text>{{info.addTime}}</text>
				</view>
				<view class="order-info-list flex fljcsb">
					<text style="margin-right:24rpx;">发货人备注：</text>
					<text class="flex1">{{info.fjrRemark}}</text>
				</view>
			</view>
			<view style="height: 60rpx;">
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import API from '../../api/index.js'
	export default {
		data() {
			return {
				orderStatus: 1,
				info:{},
				addressList: [{}, {}, {}],
				packId:''
			}
		},
		onLoad(opt) {
			console.log(opt)
			this.getDetail(opt.id)
			this.orderStatus = opt.status
			this.packId = opt.packid
		},
		methods: {
			getDetail (id) {
				API.indexHome.oderDetail({id:id}).then(res=>{
					if (res.errno==0) {
						this.info = res.data
					}
				})
			}
		}
	}
</script>

<style>
	@import url("./index.css");
</style>
